import { defineComponent, reactive, ref } from "vue";
import styles from "./search.module.less";
import LPopup from "@/components/public/lPopup/lPopup";
export default defineComponent({

  emits: ["cancel", "confirm"],
  setup(props, { emit, expose }) {
    const state = reactive({
      list: [
        "保司保单号",
        "与被保人关系",
        "被保人姓名",
        "被保人证件号",
        "状态",
      ],
      insured_people: [
      ],
      order_status: "",
    } as any)


    const searchPopupRef = ref(null as any);
    const open = (e: any) => {
      // if (e) {
      //   state.insured_people = e;
      // }

      searchPopupRef.value.open();
    }
    const close = () => {
      searchPopupRef.value.close();
    }
    expose({
      open,
      close,
    })
    const Components = () => (
      <LPopup title="查看被保人" ref={searchPopupRef}>
        <div class={styles.orderSearch}>
          <div class={styles.orderBody}>
            <div class={styles.orderRow}>
              {
                state.list.map((item: any, index: any) => {
                  return <div class={[styles["orderRowContent"], (index == 0 || index == 3) && styles["orderRowIdContent"],
                  (index == 1 || index == 2) && styles["orderRowNameContent"]
                  ]}>
                    {item}
                  </div>
                })
              }
            </div>
            {
              state.insured_people.map((item: any) => {
                return <div class={styles.orderRow}>
                  <div class={[styles["orderRowBodyContent"], styles["orderRowIdContent"]]}>
                    {item.order_no}
                  </div>
                  <div class={[styles["orderRowBodyContent"], styles["orderRowNameContent"]]}>
                    {item.identity.label}
                  </div>
                  <div class={[styles["orderRowBodyContent"], styles["orderRowNameContent"]]}>
                    {item.name}
                  </div>
                  <div class={[styles["orderRowBodyContent"], styles["orderRowIdContent"]]}>
                    {item.id_no}
                  </div>
                  <div class={styles.orderRowBodyContent}>
                    {item.order_status.label}
                  </div>
                </div>
              })
            }
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});